<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '未命名标题',
    required: true,
  },
  titleColor: {
    type: String,
    default: '#000',
  },
  changeTitleColor: {
    type: Boolean,
    default: false,
  },
  scrollTop: {
    type: Number,
    default: 0,
  },
  showLeftIcon: {
    type: Boolean,
    default: true,
  },
})

// 顶部安全区高度
const { statusBarHeight } = uni.getSystemInfoSync()

// 导航栏总高度
const totalNavHeight = computed(() => statusBarHeight + 40)

// 导航栏背景色
const navBackgroundColor = computed(() => {
  return props.scrollTop ? props.scrollTop > 20 ? 'bg-white' : 'bg-transparent' : ''
})

// 导航栏标题颜色
const navTitleColor = computed(() => {
  if (props.changeTitleColor)
    return props.scrollTop > 20 ? '#000' : props.titleColor

  return props.titleColor
})

function onClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <nav :style="{ height: `${totalNavHeight}px` }">
    <view
      class="fixed h-[40px] w-full left-0 top-0 z-100 transition-colors duration-300"
      :class="navBackgroundColor"
      :style="{ paddingTop: `${statusBarHeight}px` }"
    >
      <view v-if="showLeftIcon" class="center absolute h-[40px] left-16px">
        <nut-icon name="left" height="12px" @click="onClickLeft" />
      </view>
      <view class="center h-full">
        <p class="font-semibold transition-colors duration-300" :style="{ color: navTitleColor }">
          {{ title }}
        </p>
      </view>
    </view>
  </nav>
</template>
